<template>
	<view class="main">
		<view>
			<view class="search-box">
				<u-subsection :list="list" @change="sectionChange($event,0)" :current="current" fontSize="14">
				</u-subsection>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<!-- 已处理 我发起 -->
				<view class="handle" v-if="current">
					<view class="handle-1" :class="!currents?'active':''" @click="sectionChange(0,1)">
						已处理
					</view>
					<view class="handle-2" :class="currents?'active':''" @click="sectionChange(1,1)">
						我发起
					</view>
				</view>
				<view v-if="listData.length">
					<view class="items" v-for="v,i in listData" :key="i" @click="goMyUpcoming(v)">
						<view class="titlesd">
							<view style="color: #303133;	font-size: 28rpx;font-weight: 700;" class="centeritem">
								<view class="lefts">
									{{v.categoryLabel||v.procDefName}}
								</view>
								<view class="rights" v-if="current"
									:style="{color:stateS(v).color,border:`1rpx solid ${stateS(v).color}`,borderRadius: '7rpx'}">
									{{stateS(v).label}}
								</view>
							</view>
							<view class="fs28" style="margin-top: 20rpx;">
								<span style="color: #606266;">发起人：</span>{{v.startUserName||v.startName}}
							</view>
							<view class="fs28" style="margin-top: 16rpx;" v-if="!currents">
								<span style="color: #606266;">流程节点名称：</span>{{v.taskName}}
							</view>
							<view class="fs28" style="margin-top: 16rpx;">
								<span style="color: #606266;">申请时间：</span>{{v.applyTime||v.startTime}}
							</view>
						</view>
						<view class="titles-min">
							<u-icon name="arrow-right" color="#909399"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<NoData v-if="!listData.length" src="https://pc.chinaonebuild.com/images/workspace/nodata.png" width="256rpx" height="256rpx"
				top="200rpx" :msg="'暂无数据'" />
		</view>
	</view>
</template>

<script>
	import NoData from "@/components/noData/index.vue"
	export default {
		data() {
			return {
				queryParams: {
					typeName: "",
					pageSize: 10,
					pageNum: 1
				},
				//总数据
				total: 0,
				list: [{
					name: '待办',
				}, {
					name: '已办',
				}],
				// 外
				current: 0,
				// 内
				currents: 0,
				// 防抖
				deubge: null,
				listData: [],
			}
		},
		components: {
			NoData
		},
		// watch: {
		// 	'$store.state.ProductionOperation': {
		// 		handler(v) {
		// 			this.upcoming(v)
		// 		},
		// 		immediate: true
		// 	}
		// },
		// onBackPress无响应时可使用此生命周期函数
		onUnload() {
			uni.navigateTo({
				url: 'pages/index/index'
			});
		},
		onReachBottom() {
			if (this.total > this.listData.length) {
				this.queryParams.pageNum += 1
				this.upcoming()
			}
		},
		methods: {
			goMyUpcoming(item) {
				// current 0: 待办 所有的待办列表都能进行审批
				// current 1: 已办 所有的待办列表只能查看详情
				let label = ''
				switch (item.category) {
					case 'fbsgl':
						// 分包商管理
						label =
							`/pagesIndex/contractManagement/subcontractPages/subcontractor?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fgsgl':
						// 分供商管理
						label =
							`/pagesIndex/contractManagement/subcontractPages/subSupplier?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fbhtps':
						// 分包合同评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/subcontract?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fbhtbcxyps':
						// 分包合同补充协议评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/settlement?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fbhtjs':
						// 分包合同结算
						label =
							`/pagesIndex/contractManagement/subcontractPages/contractSettle?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzhtps':
						// 物资合同评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/materialReview?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzhtbcxyps':
						// 物资合同补充协议评审
						label =
							`/pagesIndex/contractManagement/subcontractPages/materialReplenish?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzhtjs':
						// 物资合同结算
						label =
							`/pagesIndex/contractManagement/subcontractPages/materialSettlement?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fbcbgl':
						// 分包成本管理
						label =
							`/pagesIndex/costManagement/subcontractingCost?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'zlcbgl':
						// 租赁成本管理
						label =
							`/pagesIndex/costManagement/rentalCost?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzcbgl':
						// 物资成本管理
						label =
							`/pagesIndex/costManagement/materialCost?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'yscbgl':
						// 运输成本管理
						label =
							`/pagesIndex/costManagement/transportationCost?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'qtcbgl':
						// 其他成本管理
						label =
							`/pagesIndex/costManagement/otherCosts?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'zjjh':
						// 资金计划
						label =
							`/pagesIndex/fundingPlan/funding?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fbhtfksq':
						// 分包合同付款申请
						label =
							`/pagesIndex/fundingPlan/subcontractApplication?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'fghtfksq':
						// 分供合同付款申请
						label =
							`/pagesIndex/fundingPlan/splitApplication?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'xmlxgl':
						// 项目立项管理
						label =
							`/pagesIndex/projectApproval/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'lyhtgl':
						// 履约合同管理
						label =
							`/pagesIndex/performanceManagement/performContract?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'lyhtbcxy':
						// 履约合同补充协议
						label =
							`/pagesIndex/performanceManagement/contractSettlement?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzcgjh':
						//物资采购计划
						label =
							`/pagesIndex/materialManagement/materialProcurement/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'lxwzjc':
						//零星物资进场
						label =
							`/pagesIndex/materialManagement/materialsSporadic/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzkcgl':
						//物资库存管理
						label =
							`/pagesIndex/materialManagement/materialInventory/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzzkjh':
						//物资总控计划
						label =
							`/pagesIndex/materialManagement/materialControl/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzjc':
					console.log(item.id);
						//物资进场
						label =
							`/pagesIndex/materialManagement/materialApproach/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wztc':
						//物资退场
						label =
							`/pagesIndex/materialManagement/materialExit/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wzck':
						//物资出库
						label =
							`/pagesIndex/materialManagement/materialOut/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
					case 'wztk':
						//物资退库
						label =
							`/pagesIndex/materialManagement/materialReturn/index?id=${item.id}&fromTab=${this.current}&taskId=${item.taskId}`
						break;
				}
				uni.navigateTo({
					url: label
				})
			},
			// 筛选状态
			stateS(value) {
				let label = ''
				let color = ''
				if (!this.currents) {
					switch (value.comment.type) {
						case '1':
							// 假勤申请
							label = '正常'
							color = '#44D886'
							break;
						case '2':
							// 假勤申请
							label = '退回'
							color = '#FFC778'
							break;
						case '3':
							// 假勤申请
							label = '驳回'
							color = 'red'
							break;
					}
				} else {
					switch (value.approvalStatus) {
						case 1:
							// 假勤申请
							label = '处理中'
							color = '#4AA8FF'
							break;
						case 2:
							// 假勤申请
							label = '已完成'
							color = '#39D26F'
							break;
						case 3:
							// 假勤申请
							label = '已作废'
							color = '#FF5A55'
							break;
						case 4:
							// 假勤申请
							label = '已驳回'
							color = '#FFBE0D'
							break;
					}
				}
				return {
					label,
					color
				}
			},
			// tab切换
			sectionChange(index, type) {
				!type ? (this.current = index) : (this.currents = index)
				this.restD()
			},
			// 重置
			restD() {
				this.listData = []
				this.queryParams.pageNum = 1
				this.upcoming()
			},
			// 下拉更新
			scrolltolower() {
				this.queryParams.pageNum += 1
				if (this.total <= this.listData.length) {
					uni.showToast({
						icon: 'loading',
						duration: 2000,
						title: '已经没有新的数据了！',
					})
					return
				}
				this.upcoming()
			},
			// 请求数据
			upcoming(v = this.current, ty = this.currents) {
				if (!v) {
					// 待办
					this.$api.todoList({
						...this.queryParams,
						type: 1,
						// category: "fbcbgl",
					}).then(res => {
						this.listData = this.listData.concat(res.data.rows)
						this.total = res.data.total
					})
				} else {
					// 已办
					if (ty) {
						this.$api.mineStartList({
							...this.queryParams,
							type: 1,
							// category: "fbcbgl",
							// mineStartStatus: 1,
						}).then(res => {
							this.listData = this.listData.concat(res.rows||[])
							this.total = res.total
						})
					} else {
						this.$api.finishedList({
							...this.queryParams,
							// category: "fbcbgl",
							type: 1,
						}).then(res => {
							this.listData = this.listData.concat(res.data.rows||[])
							this.total = res.data.total
						})
					}
				}
			},
		},
		onShow() {
			if (this.current == 0) {
				this.listData = []
				this.queryParams.pageNum = 1
				this.total = 0
				this.upcoming(0)
			}
		},
		// onLoad() {
		// 	console.log(this.current, '-load');
		// 	this.upcoming(0)
		// },
	}
</script>
<style scoped lang="scss">
	.rights {
		padding: 2rpx 10rpx;
		font-size: 24rpx;
	}

	.centeritem {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.handle {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 25rpx;

		.handle-1,
		.handle-2 {
			// width: 100rpx;
			padding: 10rpx 20rpx;
			border: 1rpx solid #eaeef5;
			font-size: 28rpx;
		}

		.active {
			background-color: #02A7F0;
			color: #fff;
		}
	}

	.items {
		height: 220rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 28rpx;
		border-bottom: 1px solid #eaeef5;

		.titles-min {
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #858689;
		}

		.titlesd {
			color: #191919;
			font-size: 28rpx;
			width: 100%;
		}
	}

	.scroll-Y {
		// height: 1150rpx;
	}


	.main {
		padding: 28rpx 28rpx 0;
	}
</style>
